Dancing Lines

What is this?

An animation tool for orthogonal paths — closed polygons made entirely of horizontal and vertical segments. Each shape deforms continuously, bouncing around the canvas while preserving topology constraints you define: keep crossings fixed, prevent self-intersections, or let it move freely. Think of it as a mathematical screensaver you can design yourself.

How does it work?

The path is broken into moving segments — groups of consecutive edges whose vertices all slide together along one axis (X or Y) at a randomly varying speed. Each segment moves independently and bounces off the canvas walls. When a move would violate a topology constraint (a vertex crossing another), the engine halves the time step and retries until a valid move is found, keeping the shape's structure intact forever.

Built-in Demonstrations

• OG Lode Path — the original signature shape: a 12-vertex double-crossing loop with constrained crossings.
• Nice Loop — a 10-vertex spiral with an over/under weave illusion at the crossing.
• Cross — a 12-vertex plus shape with four arms sliding independently.
• Simple Square — a minimal 4-vertex rectangle, both sides moving on the same axis.
• Square One Side Moving — the same rectangle but only one side moves, showing how segments can be selective.
• Fully Moving Square — all four sides move independently on both axes simultaneously.
• Spiral — a 12-vertex inward-winding coil with four crossing constraints active at once.

Controls

• Shape — choose a built-in demonstration. Changing shape restarts the animation.
• Line / Fill / Background / Fill rule — update live without restarting. Fill rule (nonzero or evenodd) controls how self-intersecting areas are filled.
• Line thickness — adjusts stroke width live.
• Speed — base speed for all segments. Higher = faster and more chaotic.
• Speed variability — how much individual segments can differ in speed from the base. At 0 all segments move at the same speed; at max they vary wildly.
• Speed change on bounce — how much a segment's speed changes each time it bounces off a wall or constraint.
• Restart — reinitialise the animation with current settings.
• Pause / Resume — freeze and unfreeze the animation.
• Fullscreen — expands the canvas to fill your entire screen, screensaver-style. Press ESC or move the mouse to exit.

Import / Export

Every shape is stored as a simple JSON object with vertices, segments, nodeLimits, and optional overlapIllusionData. You can:

• Export — serialise the current shape to JSON in the text area.
• Copy — copy the JSON to clipboard.
• Load — paste any valid JSON and load it instantly.
• Upload / Download — save shapes as .json files or load them from disk.

Path Editor

Click Open Editor to enter the visual editor. You can:

• Place and drag vertices on an interactive grid.
• Insert vertices between existing ones by clicking the + handles on edge midpoints.
• Define moving segments (which edges slide together and on which axis).
• Set vertex limits (XL / YL) to prevent specific vertices from crossing each other during animation.
• Add overlap illusions — white rectangles placed at crossings to fake an over/under weave effect.
• Click Apply & Animate to run your creation instantly.

Community

Click Share / Community to share the path currently playing with the world. Give it a name, add your name, and hit share. Browse paths uploaded by others, load them with a click, and upvote your favourites. The most-loved paths rise to the top.